<template>
	<div class="loginModjpass">
		<div class="moduser-top">
			<div class="moduser-imgbox">
				<img v-if="baseInfodata.imgUrl==!false&&item.imgUrl.indexOf('?')==-1" class="moduser-img"  :src="item.imgUrl+'?imageslim'" />
				<img v-if="baseInfodata.imgUrl==!false&&item.imgUrl.indexOf('?')!=-1" class="moduser-img" :src="baseInfodata.imgUrl" />
				<img v-if="baseInfodata.imgUrl==false" class="moduser-img" src="../assets/img/images/oinfouser_03.png" />
			</div>
			<p class="username" @click="num">{{baseInfodata.nick}}</p>
		</div>
		<div class="moduser-bottom">
			<yd-cell-item class="my-cell-item">
				<div slot="left"><span class="codetext">验证码</span><input class="myinput" type="text" v-model="vercode" placeholder="请输入验证码" /></div>
				<span slot="right" class="getcode" v-show="!codesta" @click="Verification()">{{codetiem}}</span>
				<span slot="right" class="getcode" v-show="codesta">{{codetiem}}</span>
			</yd-cell-item>
			<yd-cell-item>
				<div slot="left"><span class="codetext">新密码</span><input class="myinput" type="password" v-model="newpass" placeholder="新密码" /></div>
			</yd-cell-item>

			<div class="passok-box">
				<button class="passok" @click="passok">完成</button>
			</div>
		</div>

	</div>
</template>

<script>
	import { mapGetters, mapActions } from 'vuex'
	import api from '../fetch/api'
	import Swiper from "../assets/libs/jquery.md5.js";
	export default {
		name: 'loginModjpass',
		data() {
			return {
				userId: "",
				token: "",
				source: "web",
				baseInfodata: [],
				phonenum: '',
				phone2: '',
				vercode: '',
				newpass: '',
				codetiem: "获取验证码",
				codesta: false
			}
		},
		mounted() {
			var that = this;
			if(sessionStorage.getItem("userinfo") != null) {
				let getHiss = JSON.parse(sessionStorage.getItem("userinfo"));
				that.userId = getHiss.id;
				that.token = getHiss.token;
				that.phone2 = getHiss.phone;
				that.baseInfo();
			} else {
				that.$router.push({
					path: "/login"
				})
			}
		},
		methods: {
			baseInfo() {
				let that = this;
				var ajaxSign = {
					"userId": that.userId.toString(),
					"token": that.token,
					"source": that.source,
				};
				let ajaxData = api.getAES(ajaxSign);
				api.GetBaseInfo(ajaxData)
				.then(res => {
					if(res.sta == 203) {
						that.$router.push({
							path: "/login"
						})
					}
					that.baseInfodata = res.result;
					if(that.baseInfodata.imgUrl == "") {
						that.baseInfodata.imgUrl = false
					}
				})
			},
			//			获取手机验证码
			Verification() {
				var that = this;
				let ajaxSign = {
					"source": that.source,
					"phone": that.phone2
				};
				let ajaxData = api.getAES(ajaxSign);
				api.GetVerCode(ajaxData)
					.then(res => {
						if(res.sta == 200) {
							that.num();
						}
						that.$dialog.toast({
							mes: res.msg,
							timeout: 1000
						})
					})
			},
			num() {
				let that = this;
				let n = 60
				that.codesta = true;
				let setter = setInterval(function() {
					n--;
					that.codetiem = n + "s";
					if(n == 0) {
						that.codetiem = "获取验证码"
						that.codesta = false;
					}

				}, 1000)
				setTimeout(function() {
					clearInterval(setter)
				}, 60000)
			},
			passok() {
				var that = this;
				let getHiss = JSON.parse(sessionStorage.getItem("userinfo"));
				var ajaxSign = {
					"source": that.source, // string 是
					"token": getHiss.token,
					"userId": getHiss.id.toString(),
					"passWord": $.md5(that.newpass),
					"code": that.vercode.toString(),
				};
				let ajaxData = api.getAES(ajaxSign);
				//				数据调用
				api.GetBaseMember(ajaxData)
				.then(res => {
					that.$dialog.toast({
						mes: res.msg,
						timeout: 1000
					})
					if (res.sta==200) {
						
					that.$router.push({
						path: "/login"
					})
					}
				})

			}
		}
	}
</script>

<style>
	body {
		background: #fff;
	}
	
	.loginModjpass {
		width: 100%;
	}
	
	.moduser-top {
		width: 100%;
		text-align: center;
		padding: .56rem 0 .52rem;
		border-bottom: 10px solid #eeecec;
		box-sizing: border-box;
	}
	
	.moduser-imgbox {
		width: 1.47rem;
		height: 1.47rem;
		border-radius: 50%;
		margin: auto;
	}
	
	.moduser-img {
		max-width: 100%;
		min-height: 100%;
	}
	
	.username {
		font-size: .31rem;
		color: #a4a4a4;
		margin-top: .28rem;
	}
	
	.codetext {
		font-size: .28rem;
		color: #282828;
		padding-right: .28rem;
		box-sizing: border-box;
		position: relative;
	}
	
	.codetext::after {
		content: "";
		display: block;
		width: 1px;
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
		background: #ababab;
	}
	
	.myinput {
		font-size: .25rem;
		color: #7e7c7c;
		border: none;
		padding-left: .1rem;
		box-sizing: border-box;
	}
	
	.getcode {
		font-size: .28rem;
		color: #e34648;
		border-bottom: 1px solid #e34648;
		display: inline-block;
		padding-bottom: .03rem;
	}
	
	.codeimg {
		width: 3rem;
	}
	
	.passok-box {
		width: 100%;
		text-align: center;
		padding-top: .65rem;
		box-sizing: border-box;
	}
	
	.passok {
		border: none;
		width: 3.36rem;
		height: .58rem;
		background: #e25051;
		font-size: .35rem;
		color: #fff;
		border-radius: .05rem;
	}
</style>